<template>
    <div>
        <el-row type="flex" :gutter="10" v-show="url.length > 0">
            <el-col :span="6" v-for="(item, index) in url" :key="index">
                <el-image
                    :src="item.path"
                    :preview-src-list="url.map(item => item.path)"
                ></el-image>
            </el-col>
        </el-row>
        <div
            style="line-height:200px;text-align:center;"
            v-show="url.length === 0"
        >
            该客户暂时没有照片
        </div>
        <el-row type="flex" justify="center" style="margin-top:30px">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "member-photo",
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        row() {
            return this.selection[this.current] || {};
        }
    },
    data() {
        return {
            url: [],
            current: 0
        };
    },
    watch: {
        selection() {
            this.setUrl();
        }
    },
    mounted() {
        this.setUrl();
    },
    methods: {
        async setUrl() {
            const result = await get({
                url: "/admin/user.RealmeritUser/getPhotoByUserId",
                params: {
                    customerId: this.row.neuronCusId
                }
            });
            this.url = result.row;
        },
        onConfirm() {
            if (this.current === this.selection.length - 1) {
                this.current = 0;
                this.$parent.$emit("update:visible", false);
            } else {
                this.current += 1;
                this.setUrl();
            }
        },
        onCancel() {
            this.current = 0;
            this.$parent.$emit("update:visible", false);
        }
    }
};
</script>
